<template>
    <div id="detail" class="detail-container">
      <div class="announcement-header">
        <div class="announcement-title">
          <h1 class="h-title">{{article.title}}</h1>
        </div>
        <div class="announcement-header-desc">
          <span class="desc-span" v-if="article.createTime">发布时间：{{article.createTime}}</span>
          <span class="desc-span" v-if="article.viewCount">浏览量：{{article.viewCount}}</span>
          <span class="desc-span" v-if="article.viewCount">发布者：xxx社区</span>
        </div>
      </div>
      <div id = "text" ref="markdown"
           class="article-content markdown-body"
           v-html="article.content">
      </div>
    </div>
</template>

<script>
  import {getAnnouncementDetail} from "../../api/article/article";
  import { mavonEditor } from 'mavon-editor'
  export default {
    name: "AnnouncementDetail",
    data() {
      return {
        article: {}
      }
    },
    created() {
      document.title = "公告详情"
      this.getAnnouncementById(this.$route.query.aid)
    },
    methods: {
      getAnnouncementById(aid) {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
          target: document.querySelector("#detail")
        });
        getAnnouncementDetail(aid).then((res) => {
          this.article = res
          const markdownIt = mavonEditor.getMarkdownIt()
          this.article.content = markdownIt.render(res.content)
          document.title = res.title
          loading.close();
        })
      }
    }
  }
</script>

<style scoped>
  .announcement-container {
    width: 90%;
    margin: 0 auto;
  }
  .desc-span {
    font-size: 15px;
    display: block;
  }
  .h-title {
    font-weight: bold;
    font-size: 250%;
  }
  .announcement-header {
    height: 20vh;
  }
  .announcement-title {
    text-align: center;
    min-height: 8vh;
  }
  .announcement-header-desc{
    margin-top: 2vh;
    text-align: right;
  }
  .detail-container {
    margin: 5vh auto;
    min-height: 80vh;
    max-width: 50vw;
    padding: 5vh;
    border-radius: 5vh;
    background: #fff;
    box-shadow: 0 0 15px #b6b5b5;
  }
</style>
